<template>
  <div id="tablecom">
    <div class="form-block">
      <!-- <i class="el-icon-search"></i> -->
      <el-autocomplete
        class="inline-input search-input"
        prefix-icon="el-icon-search"
        clearable
        v-model="searchinput"
        :fetch-suggestions="querySearch"
        size="small"
        placeholder="请输入内容"
        :trigger-on-focus="true"
        @select="handleSelectInput"
      ></el-autocomplete>
    </div>
    <el-scrollbar class="form-component__scroll">
      <!-- 返回顶部组件 -->
      <template>
        <el-backtop target=".form-component__scroll .el-scrollbar__wrap" :bottom="60"></el-backtop>
      </template>
      
      <!-- :default-sort 设置默认排序 height="600" -->
      <el-table ref="multipleTable" :data="tableDataNew" tooltip-effect="dark" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" 
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号" sortable width="80"></el-table-column>
        <el-table-column label="日期" sortable width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column label="头像" width="120">
          <template slot-scope="scope">
            <img :src="scope.row.shop_img" width="40" height="40" class="head_pic"/>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
        <el-table-column label="修改日期" sortable width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
    </el-scrollbar>
    <paging :formconfig="formConfig" v-on:handle-current="listenCurrent" v-on:handle-size="listenSize" ref="mychild"></paging>
  </div>
</template>

<script>
import paging from "@/components/paging"

export default {
  name: "tablecom",
  data() {
    return {
      // 分页器配置
      restaurants: [],
      searchinput: "",
      formConfig: {
        current: 1,
        length: 299,
        pagesizes: [20, 50, 100, 200],
        pagesize: 50
      },
      tableData: [],
      tableDataNew: [
        {id: 1,date: '2016-05-02', name: '王小虎', shop_img: require('../../static/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 2,date: '2016-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 3,date: '2015-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 4,date: '2016-09-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 5,date: '2016-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 6,date: '2016-05-05', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 7,date: '2016-05-12', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 8,date: '2016-09-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 9,date: '2014-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 11,date: '2016-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 12,date: '2046-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 13,date: '2036-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 14,date: '2216-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 16,date: '2116-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 17,date: '2616-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 18,date: '2816-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 19,date: '2406-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 20,date: '1016-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 21,date: '3016-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 23,date: '6016-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 24,date: '8016-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 26,date: '9016-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 28,date: '2096-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 29,date: '2366-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 30,date: '2276-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 35,date: '2966-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'},
        {id: 40,date: '2106-05-02', name: '王小虎', shop_img: require('../assets/logo.png'), address: '上海市普陀区金沙江路 1518 弄'}
      ],
      multipleSelection: []
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      // console.log(restaurants)
      console.log(results)
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "Mderci Paul时刻了", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
        { "value": "Mdfsi发的时刻了", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
        { "value": "M山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
        { "value": "M山王（西百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
        { "value": "M山", "address": "上海市普陀区棕榈路" }
      ];
    },
    handleSelectInput(item) {
      
      console.log(item);
    },
    listenCurrent(something){
      this.pageNum = something;
      // this._synchron();
      console.log(this.pageNum);
    },
    listenSize(something){
      this.pageNum = something;
      // this._synchron();
      console.log(this.pageNum);
    },
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    //   var _this = this,item = {index: 1,date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄"};
    //   _this.tableData = Array(_this.formConfig.pagesize).fill(item);
    // },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    // },
    // 选中及取消
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  created() {
    var _this = this, itemmsg = {index: 1,date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄"};
    _this.tableData = Array(_this.formConfig.pagesize).fill(itemmsg);
  },
  components:{
    "paging": paging,
  }
};
</script>

<style>
  #tablecom{
    height: 100%;
  }
  .search-input .el-icon-search:before{
    font-size: 16px;
  }
  .form-block{
    padding: 0px 0 6px;
  }
  /* // 右下角内容滚动条高度（分页器高度 + 上外边距：28+8） */
  .el-scrollbar {
    height: calc(100% - 74px);
  }

  .form-component__scroll .el-scrollbar__wrap{
    overflow-x: hidden;
    overflow-y: auto;
  }
  /* // 分页器样式 */
  .el-pagination{
    margin-top: 8px;
    padding: 0 20px;
    text-align: right;
  }

</style>